<div ng-init="init();" class="kmi-layout-content mobile07-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile07.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px; border-bottom: 1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile07.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style = "flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="search();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobile07.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <div class="kmi-row-fields" style="border-bottom:1px #cecece solid;">
            <div class="dashboard-item">
                <div mdl-piechart datas="pie_data_users" config="pieChart_config"></div>
            </div>
            <!--
            <div class="dashboard-label-content">
                <div class="dashboard-label-item" ng-repeat="detail in pie_data_users" >
                    <div class="item-tag" ng-style="{'background': detail.color}"></div>
                    <div class="item-label" ng-bind="getDashboardLabel(detail)"></div>
                </div>
            </div>
            -->
            <div class="dashboard-label-content">
                <div class="dashboard-label-item" ng-repeat="detail in pie_data_users" ng-style="{'background': detail.color}">
                    <div class="item-label" ng-bind="detail.label"></div>
                    <div class="item-value" ng-bind="detail.value"></div>
                    <div class="kmi-can-click" ng-click="changeTab(detail);"></div>
                </div>
            </div>
        </div>
        <div class="kmi-list tab-contenter none-column-split" >
            <div class="kmi-list__header" style="padding: 4px 8px;">
                <div class="kmi-list__column" style="flex: 0 0 100px;" ng-bind="'mobile07.list.column1'|translate"></div>
                <div class="kmi-list__column" style="flex: 0 0 80px;" ng-bind="'mobile07.list.column2'|translate" ng-hide="now_status=='UNWORKUSERS'"></div>
                <div class="kmi-list__column head-controls" style="flex:1;" ng-hide="now_status=='UNWORKUSERS'">
                    <div class="order">
                        {{'mobile07.list.column3' | translate}}
                        <i class="material-icons">{{!LOGINDATE_oderBy?'&#xE5D8;':'&#xE5DB;'}}</i>
                        <div class="kmi-can-click" ng-click="LOGINDATE_oderBy = !LOGINDATE_oderBy"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in query_result | filter : {'ID': now_status} : true | orderBy : 'LOGINDATE' : LOGINDATE_oderBy track by $index" style="padding: 4px 8px; height: 42px;">
                    <div class="kmi-list__column" ng-bind="item.USERNAME" style="flex:0 0 100px;"></div>
                    <div class="kmi-list__column" ng-bind="item.PLACENOCOUNT" style="flex: 0 0 80px;" ng-hide="now_status=='UNWORKUSERS'"></div>
                    <div class="kmi-list__column" ng-bind="item.LOGINDATE" style="flex: 1;" ng-hide="now_status=='UNWORKUSERS'"></div>
                    <div class="kmi-can-click" ng-click="showItemDetail(item);" ng-hide="now_status=='UNWORKUSERS'"></div>
                </div>
            </div>
        </div>
    </div>
</div>
